<template>
  <div class="search-index">
    <Header></Header>
    <section>

      <div class="history-search" v-if="localHistorySearch.length">
        <div class="title">
          <i class="iconfont icon-shijian"></i>
          <span>历史搜索</span>
          <span @click="clearHistorySearch">清空历史记录</span>
        </div>
        <ul class="history">
          <li v-for="(historySearch, index) of localHistorySearch" :key="index">
            <router-link :to="`/search/list?searchName=${historySearch}`">
              {{ historySearch }}
            </router-link>
          </li>
        </ul>
      </div>
      <div v-else>暂无搜索记录...</div>

    </section>
    <Tabbar></Tabbar>
  </div>
</template>

<script setup>
import Header from './Header.vue'
import Tabbar from '@/components/common/Tabbar'
import { Dialog } from 'vant'
import { ref } from 'vue'

const localHistorySearch = ref(JSON.parse(localStorage.getItem('localHistorySearch')) || [])

const clearHistorySearch = () => {
  Dialog.confirm({
    title: '提示',
    message: '确定清除历史搜索吗?',
  }).then(() => {
    localStorage.removeItem('localHistorySearch')
    localHistorySearch.value = []
  })
}
</script>

<style lang="less" scoped>
.search-index {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;

  section {
    flex: 1;
    overflow: hidden;
    background-color: #f5f5f5;

    .history-search {
      padding: 0 20px;

      .title {
        height: 50px;
        display: flex;
        align-items: center;

        .iconfont {
          color: #b0352f;
          font-size: 22px;
          margin-right: 5px;
        }

        span {
          font-size: 15px;
        }

        span:nth-of-type(2) {
          margin-left: auto;
        }
      }

      .history {
        display: flex;
        flex-wrap: wrap;
        column-gap: 20px;
        row-gap: 15px;

        li {
          border: 1px solid #ddd;
          line-height: 30px;
          padding: 0 5px;
          color: #999;
          font-size: 14px;
        }
      }
    }
  }
}
</style>